<!-- 农机租凭和场地租凭-->
<template>
	<view>
		<view class="main" v-if="showFlag">
			<view class="container">
				<view class="top">
					<image src="../../../../../static/play.png" mode=""></image>
					<view class="title">
						4LBZ-145型半喂入联合收割机
					</view>
				</view>
				<view class="time">
					<view class="startTime">
						2024/09/12 12:59
					</view>
					<view class="icon">
						——————
					</view>
					2024/09/12 12:59
				</view>
				<view class="bottom">
					<view class="serviceTitle">
						服务机构
					</view>
					<view class="serviceName">
						旧馆服务基地
					</view>
					<view class="address">
						地址：浙江省湖州市大亩担
					</view>
				</view>
			</view>
			<view class="form">
				<u--form labelPosition="left" :model="model" :rules="rules" ref="form">

					<u-form-item label="联系人" prop="formData.name">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/machinery/xingming.png" mode="heightFix">
							</image>
						</view>
						<u--input v-model="model.formData.name" placeholder='请输入姓名' border="none"></u--input>
					</u-form-item>

					<u-form-item label="联系电话" prop="formData.phone">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/machinery/lianxidianhua.png"
								mode="heightFix">
							</image>
						</view>
						<u-input v-model="model.formData.phone" :type="'number'" placeholder='请输入电话号'
							border="none"></u-input>
					</u-form-item>

					<u-form-item label="备注">
						<view class="left-image">
							<image class="left-img" src="@/subPage1/static/machinery/xingming.png" mode="heightFix">
							</image>
						</view>
						<u--input v-model="model.formData.dcs" placeholder='请输入备注' border="none"></u--input>
					</u-form-item>

				</u--form>
			</view>
			<view class="btn">
				<u-button type="primary" color="#0480FB" text="提交订单" @click="submit"></u-button>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import informationFillingAPI from '@/api/socialized-servce/farm-service/normalUser/serviceSelect/service-organization/information-filling/index.js'
	export default {
		data() {
			return {
				model: {
					formData: {
						name: '',
						phone: '',
						dcs: ''
					},
				},
				rules: {
					'formData.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'formData.phone': [
						{
							type: 'string',
							required: true,
							message: '请填写联系电话',
							trigger: ['blur', 'change']
						},
						{
							type: 'string',
							validator: (rule, value, callback) => {
								if (value.length <= 11) {
									if (value != '') {
										return this.$u.test.mobile(value)
									}
								} else {
									return false
								}
							},
							message: '手机号格式不对,请输入正确的手机号',
							trigger: ['blur', 'change']
						},
					]
				}
			}
		},
		props: {
			showFlag: {
				type: Boolean,
				default: ()=> false
			}
		},
		created() {
			let userInfo = JSON.parse(uni.getStorageSync('userServerInfo'))
			this.model.formData.name = userInfo.nickName
			this.model.formData.phone = userInfo.phoneNumber
		},
		methods: {
			changeClick(e) {
				this.$refs.form.validateField('formData.datetimerange')
			},
			submit() {
				this.$refs.form.validate().then(async () => {
					console.log(uni.getStorageSync('serviceTypeName1'));
					// 发请求
				}).catch(errors => {
					console.log("失败信息:" + JSON.stringify(errors))
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 20rpx;

		.container {
			border: 2rpx solid #ccc;
			padding: 20rpx;

			.top {
				display: flex;
				align-content: center;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.title {
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					font-size: 28rpx;
				}
			}

			.time {
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.icon {
					padding: 0 50rpx;
				}
			}

			.bottom {
				font-size: 28rpx;
				margin-top: 20rpx;

				.serviceTitle {
					font-size: 28rpx;
					font-weight: 600;
				}

				.serviceName {
					margin-top: 10rpx;
					padding-left: 10rpx;
				}

				.address {
					margin-top: 10rpx;
					padding-left: 10rpx;
				}
			}
		}

		.form {
			margin-top: 20rpx;
			// border: 2rpx solid #ccc;
		}

		.btn {
			margin-top: 60rpx;
		}
	}

	/deep/.u-form {
		padding: 0 32rpx;
	}

	/deep/.u-form-item {
		position: relative;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.left-image {
		position: absolute;
		// top: 50%;
		// transform: translateY(-50%);
		left: 0;
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
		margin-left: 22rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
	}

	.left-img {
		height: 26rpx;
	}

	/deep/ .u-form-item__body__left {
		width: 200rpx !important;
		margin-left: 50px;
	}

	/deep/ .u-checkbox-group--row {
		display: flex !important;
		flex-wrap: wrap !important;
		flex-shrink: 1;
	}
</style>